<template>
	<view class="tradeCard">
		<view class="tradeLeft">
			<view class="tradeprocces"></view>
		</view>
		<view class="tradeRight">
			<view class="toneCol">
				<view class="tLeft">
					<view class="circleV"></view>
					<view class="tcircTitle">第5笔</view>
					<!-- <view class="timeBox">
						<image src="../../static/images/zbPage/time.png" mode="heightFix"></image>
					</view> -->
					
					<view class="timeText">
						<uni-dateformat :date="Date.now()" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
					</view>
				</view>
				
				<view class="toneDelete">
					<image src="../../static/images/zbPage/delete.png" mode="heightFix"></image>
				</view>
			</view>
			
			<view class="tradeInfo">
				<view class="InfoLeft">
					<view class="topText">买入重量(克)</view>
					<view class="numText">2000</view>
				</view>
				
				<view class="InfoCenter">
					<view class="tradeRate">
						<view class="tradeRateText">
							<view class="tradeRateTop">收益</view>
							<view class="tradeRateNum wintext">+235</view>
							<view class="tradeRatebott wintext">30.00%</view>
						</view>
					</view>
					<!-- <view class="bottomRate" style="color: red;"></view> -->
					
					<!-- <view class="timeBox">
						<image src="../../static/images/zbPage/time.png" mode="heightFix"></image>
					</view>
					
					<view class="timeText">
						<uni-dateformat :date="Date.now()" format="yyyy年MM月dd日 HH:mm:ss"></uni-dateformat>
					</view> -->
				</view>
				<view class="InfoRight">
					<view class="topText">卖出重量(克)</view>
					<view class="numText">2000</view>						
				</view>
			</view>
			<view class="tradeTwoBox">
				<view class="twoTradeLeft">
					<view class="topText">买入金额(元)</view>
					<view class="numText">5000.00</view>	
				</view>
				<view class="twoTradeRight">
					<view class="topText">买入均价(元)</view>
					<view class="numText">788.00</view>	
				</view>
				<view class="twoTradeCenter">
					<view class="topText">手续费(元)</view>
					<view class="numText">80.00</view>	
				</view>
				
			</view>
			
			<view class="line" style="border-top: 2rpx dashed rgba(0, 0, 0, 0.15);margin-top: 10rpx;"></view>
			
			<view class="msgBox">
				<view v-if="deShowFlag" class="addItemBox">
					<view class="addItemText">新增交易</view>
					<!-- <view class="">
						<u-icon size="12" name="plus" color="#f9ae3d"></u-icon>
					</view> -->
					
					
				</view>
				<view v-else class="msgLeft">
					<view class="iconMsg">
						<image src="/static/images/zbPage/message-one.png" mode="heightFix"></image>
					</view>
					<view class="msgText">
						<view class="timeText">
							<uni-dateformat :date="Date.now()" format="yyyy.MM.dd hh:mm:ss"></uni-dateformat>
						</view>
						<view class="textInfo">买入1000元(1.3035克)</view>
					</view>
				</view>
				<view class="msgRight" @click="fnShow">
					<view class="msgRightText">详情</view>
					<view class="msgRightIcon">
						<image style="transition: transform 0.5s ease;" :class="{ jtRoted: deShowFlag }" src="../../static/images/zbPage/down.png" mode="heightFix"></image>
					</view>
				</view>
			</view>
			
			<view class="tadeItemBox" v-if="deShowFlag" :class="{tadeItemBoxShow: deShowFlag}">
				<view class="line" style="margin-left: 0rpx;margin-right: 0rpx;"></view>
				<view class="recordTitle">
					<view class="bTitle">类型</view>
					<view class="bTitle timeInfo">时间</view>
					<view class="bTitle numInfo">克重/金价</view>
					<view class="bTitle numInfo">金额/手续费</view>
				</view>
				<view class="line" style="margin-left: 0rpx;margin-right: 0rpx;margin-top: 10rpx;"></view>
				
				<scroll-view class="recordView" scroll-y="true">
					<u-swipe-action>
						<u-swipe-action-item
						          :options="swipeOptions"
								  threshold="50"
						        >
							<view class="recordInfo">
								<view class="typeClass">
									<view class="recordTypeBoxOut">
										卖出
									</view>
								</view>
								<view class="recordTimeBox">
									<uni-dateformat :date="Date.now()" format="yy-MM-dd"></uni-dateformat>
									<uni-dateformat style="color: #9B9C9E;" :date="Date.now()" format="hh:mm:ss"></uni-dateformat>
									
								</view>
								<view class="recordNumBox">
									<view class="kz">1.6656克</view>
									<view class="jj">1000.00元</view>
											
								</view>
								<view class="recordMonBox">
									<view class="mony">1.6656克</view>
									<view class="sxf">1000.00元</view>
								</view>
							</view>
							<view class="line" style="margin-left: 0rpx;margin-right: 0rpx;border-top: 1rpx dashed rgba(0, 0, 0, 0.15);"></view>
						</u-swipe-action-item>
						<u-swipe-action-item
						          :options="swipeOptions"
								  threshold="50"
						        >
							<view class="recordInfo">
								<view class="typeClass">
									<view class="recordTypeBoxOut">
										卖出
									</view>
								</view>
								<view class="recordTimeBox">
									<uni-dateformat :date="Date.now()" format="yy-MM-dd"></uni-dateformat>
									<uni-dateformat style="color: #9B9C9E;" :date="Date.now()" format="hh:mm:ss"></uni-dateformat>
									
								</view>
								<view class="recordNumBox">
									<view class="kz">1.6656克</view>
									<view class="jj">1000.00元</view>
											
								</view>
								<view class="recordMonBox">
									<view class="mony">1.6656克</view>
									<view class="sxf">1000.00元</view>
								</view>
							</view>
							<view class="line" style="margin-left: 0rpx;margin-right: 0rpx;border-top: 1rpx dashed rgba(0, 0, 0, 0.15);"></view>
						</u-swipe-action-item>
						<u-swipe-action-item
						          :options="swipeOptions"
								  threshold="50"
						        >
							<view class="recordInfo">
								<view class="typeClass">
									<view class="recordTypeBoxOut">
										卖出
									</view>
								</view>
								<view class="recordTimeBox">
									<uni-dateformat :date="Date.now()" format="yy-MM-dd"></uni-dateformat>
									<uni-dateformat style="color: #9B9C9E;" :date="Date.now()" format="hh:mm:ss"></uni-dateformat>
									
								</view>
								<view class="recordNumBox">
									<view class="kz">1.6656克</view>
									<view class="jj">1000.00元</view>
											
								</view>
								<view class="recordMonBox">
									<view class="mony">1.6656克</view>
									<view class="sxf">1000.00元</view>
								</view>
							</view>
							<view class="line" style="margin-left: 0rpx;margin-right: 0rpx;border-top: 1rpx dashed rgba(0, 0, 0, 0.15);"></view>
							
						</u-swipe-action-item>
						<u-swipe-action-item
						          :options="swipeOptions"
								  threshold="50"
						        >
							<view class="recordInfo">
								<view class="typeClass">
									<view class="recordTypeBoxIn">
										买入
									</view>
								</view>
								<view class="recordTimeBox">
									<uni-dateformat :date="Date.now()" format="yy-MM-dd"></uni-dateformat>
									<uni-dateformat style="color: #9B9C9E;" :date="Date.now()" format="hh:mm:ss"></uni-dateformat>
									
								</view>
								<view class="recordNumBox">
									<view class="kz">1.6656克</view>
									<view class="jj">1000.00元</view>
											
								</view>
								<view class="recordMonBox">
									<view class="mony">1.6656克</view>
									<view class="sxf">1000.00元</view>
								</view>
							</view>
							<view class="line" style="margin-left: 0rpx;margin-right: 0rpx;border-top: 1rpx dashed rgba(0, 0, 0, 0.15);"></view>
							
						</u-swipe-action-item>
					</u-swipe-action>
					
					
					
				</scroll-view>
				<!-- <scroll-view scroll-y="true" class="scrollBox">
					<view class="scrollTop">
						AA
					</view>
					<view class="scrollTop">
						AA
					</view>
				</scroll-view> -->
			</view>
			
			
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"tradeCard",
		data() {
			return {
				deShowFlag: false,
				swipeOptions: [
					{
						text: '删除',
						style: {
                            backgroundColor: 'red',
                        }
					},
				]
			};
		},
		methods: {
			fnShow() {
				this.deShowFlag = !this.deShowFlag
				console.log(this.deShowFlag);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tradeCard{
		// border: 1rpx solid red;
		overflow: hidden;
		margin-top: 10rpx;
		height: auto;
		border-radius: 20rpx;
		background: #FFF;
		display: flex;
		flex-direction: column;
		.tradeLeft {
			display: flex;
			align-items: flex-end;
			// background: #EFEFF4;
			// background: #faf5f4;
			background: #FFF5E9;
			.tradeprocces{
				// height: 100%;
				// width: 6rpx;
				width: 80%;
				height: 6rpx;
				background: linear-gradient(to top, #f3e4b2, #FFC96F, #fbc20a);
				// background: #FFC96F;
				// background: #AFAFD8;
				// background: #f9ae3d;
				// border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				
			}
		}
		
		.tradeRight {
			// background: linear-gradient(to top, #FFFAF0, #FFF 40%);
			// border: 1rpx solid rebeccapurple;
			// width: 100%;
			// height: 100%;
			// padding-left: 20rpx;
			padding-top: 10rpx;
			// padding-right: 20rpx;
			// padding-left: 20rpx;
			// // margin-top: 10rpx;
			// padding-top: 10rpx;
			.toneCol {
				// border: 1rpx solid rebeccapurple;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.tLeft {
					display: flex;
					align-items: center;
					padding-left: 10rpx;
					.circleV {
						width: 15rpx;
						height: 15rpx;
						border-radius: 50%;
						// background: #fbc20a;
						// background: #AFAFD8;
						background: #f9ae3d;
					}
					
					.tcircTitle {
						// margin-left: 10rpx;
						padding-left: 10rpx;
						font-weight: bold;
						// color: #333333;
						color: #7D7E80;
						// font-size: 25rpx;
					}
					.timeBox {
						// border: 1rpx solid red;
						// margin-top: 20rpx;
						height: 25rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.timeText {
						border-radius: 20rpx;
						padding-left: 5rpx;
						padding-right: 5rpx;
						margin-top: 8rpx;
						margin-left: 10rpx;
						// padding-top: 18rpx;
						// border: 1rpx solid #9B9C9E;
						text-align: center;
						font-size: 18rpx;
						font-weight: bold;
						color: #9B9C9E;
					}
				}
				
				
				
				.toneDelete {
					// border: 1rpx solid red;
					
					display: flex;
					height: 30rpx;
					padding-right: 20rpx;
					padding-left: 20rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			
			.tradeInfo {
				
				height: 125rpx;
				// width: 100%;
				// height: 100%;
				display: grid;
				grid-template-columns: repeat(3, 1fr);	
				// border: 1rpx solid red;
				// gap: 10rpx;
				.InfoLeft {
					
					// border: 1rpx solid gold;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					
				}
				
				.InfoCenter {
					// height: 130rpx;
					// border: 1rpx solid gray;
					display: flex;
					align-items: flex-start;
					justify-content: center;
					// flex-direction: column;	
					.tradeRate {
						
						width: 120rpx;
						height: 120rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 50%;
						background: 
						radial-gradient(circle at 50% 50%, white 48rpx, transparent 48rpx),
						conic-gradient(#f9ae3d 0% 10%, rgba(255, 183, 77, 0.1) 10% 100%);
						// conic-gradient(#AFAFD8 0% 10%, #F0F0FF 10% 100%);
						
						// #f9ae3d   #faf3c8  #fbf8dd   #fae0a5  #f2a847
						// box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* 这里的阴影效果可以根据需要调整 */
						.tradeRateText {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							
							.tradeRateTop {
								// border: 1rpx solid red;
								font-size: 20rpx;
								color: #9B9C9E;
							}
							
							.tradeRateNum {
								// border: 1rpx solid green;
								padding: 0;
								font-size: 25rpx;
							}
							
							.tradeRatebott {
								// border: 1rpx solid salmon;
								font-size: 15rpx;
							}
						}
					}
					
					.bottomRate {
						text-align: center;
						height: 20rpx;
						width: 100rpx;
						margin-top: 10rpx;
						// border-radius: 100%;
						// background: #000000;
						// opacity: .05;
					}
					
					// .timeBox {
					// 	margin-top: 20rpx;
					// 	height: 25rpx;
					// 	image {
					// 		width: 100%;
					// 		height: 100%;
					// 	}
					// }
					// .timeText {
					// 	font-size: 10rpx;
					// 	color: #9B9C9E;
					// }
				}
				
				.InfoRight {
					// height: 130rpx;
					// border: 1rpx solid green;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
			}
			
			.tradeTwoBox {
				// border: 1rpx solid red;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				
				.twoTradeLeft {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
				}
					
				.twoTradeCenter {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
				}
				
				.twoTradeRight {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					
				}
			}
			
			.msgBox {
				// padding: 10rpx;
				padding-left: 10rpx;
				padding-top: 5rpx;
				padding-bottom: 5rpx;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				display: flex;
				justify-content: space-between;
				// margin-top: 10rpx;
				// border: 1rpx solid green;
				
				.addItemBox {
					// border: 1rpx solid red;
					// margin-top: 5rpx;
					// margin-bottom: 5rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1rpx solid #f9ae3d;
					border-radius: 25rpx;
					.addItemText {
						text-align: center;
						
						padding-left: 10rpx;
						padding-right: 10rpx;
						font-size: 25rpx;
						color: #f9ae3d;
					}
				}
				
				.msgLeft {
					display: flex;
					align-items: center;
					
					.iconMsg {
						display: flex;
						padding-left: 10rpx;
						// border: 1rpx solid darkred;
						height: 30rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
					
					.msgText {
						
						// padding-top: 10rpx;
						padding-left: 10rpx;
						// border: 1rpx solid red;
						display: flex;
						align-items: center;
						font-size: 22rpx;
						color: #9B9C9E;
						
						.textInfo {
							padding-left: 5rpx;
						}
					}
				}
				
				.msgRight {
					display: flex;
					align-items: center;
					justify-content: center;
					// border: 1rpx solid red;
					padding-top: 5rpx;
					padding-bottom: 5rpx;
					.msgRightText {
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: #9B9C9E;
						
					}
					
					.msgRightIcon {
						// border: 1rpx solid gray;
						padding-right: 10rpx;
						height: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
				
			}
			
			.tadeItemBox {
				// border: 1rpx solid red;
				// background: #EFEFF4;
				margin-left: 15rpx;
				margin-right: 15rpx;
				// padding-right: 5rpx;
				transition: 0.5s;
				// transition: height 0.5s ease-in-out;
				// max-height: 0rpx;
				display: flex;
				flex-direction: column;
				
				.recordTitle {
					padding-top: 5rpx;
					display: grid;
					// grid-template-columns: repeat(4, 1fr);
					grid-template-columns: 1fr 1fr 2fr 2fr;
					
					.bTitle{
						font-size: 25rpx;
						// color: #9B9C9E;
						color: #7D7E80;
						display: flex;
						// align-items: center;
						// justify-content: center;
						// border: 1rpx solid red;
						// color: #8f8f94;
						// font-size: 22rpx;
					}
					.numInfo {
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}
					
					.timeInfo {
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				
				.recordView {
					height: 250rpx;
					// border: 1rpx solid forestgreen;
					.recordInfo {
						// border: 1rpx solid forestgreen;
						padding-bottom: 15rpx;
						// border-top: 3rpx dashed rgba(0, 0, 0, 0.15);
						padding-top: 15rpx;
						display: grid;
						grid-template-columns: 1fr 1fr 2fr 2fr;
						// text-align: center;
						.typeClass {
							// border: 1rpx solid forestgreen;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							.recordTypeBoxIn {
								text-align: center;
								border: 1rpx solid #f9ae3d;
								border-radius: 25rpx;
								padding-left: 10rpx;
								padding-right: 10rpx;
								font-size: 25rpx;
								color: #f9ae3d;
								font-weight: bold;
							}
							
							.recordTypeBoxOut {
								text-align: center;
								border: 1rpx solid #AFAFD8;
								border-radius: 25rpx;
								padding-left: 10rpx;
								padding-right: 10rpx;
								font-size: 25rpx;
								color: #AFAFD8;
								font-weight: bold;
							}
						}
						
						.recordTimeBox {
							display: flex;
							flex-direction: column;
							align-items: center;
							// border: 1rpx solid forestgreen;
							font-size: 25rpx;
						}
						
						.recordNumBox {
							// border: 1rpx solid forestgreen;
							font-size: 25rpx;
							display: flex;
							align-items: flex-end;
							// justify-content: flex-end;
							flex-direction: column;
							.jj {
								color: #9B9C9E;
							}
						}
						
						.recordMonBox {
							font-size: 25rpx;
							display: flex;
							align-items: flex-end;
							flex-direction: column;
							.mony {
								
							}
							
							.sxf {
								color: #9B9C9E;
							}
						}
						
					}
					
					.recordInfo:nth-child(1) {
						margin-top: 0rpx;
						border-top: none;
					}
				}
				
				.scrollBox {
					// background-color: #EE2C2C;
					height: 90%;
					
					
					.scrollTop {
						
					}
				}
			}
			
			
		}
		
		
		
	}
	
	.tadeItemBoxShow {
		// max-height: 150rpx;
		height: 320rpx;
		// height: calc-size(auto, 150);
	}
	
	.line {
		// margin-top: 20rpx;
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		margin-right: 20rpx;
		// width: 90%;
		height: 1rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		z-index: 1;
	}
	
	.wintext{
		background: linear-gradient(to top right, #FF3030, #EE2C2C);
		-webkit-background-clip: text;
		color: transparent;
		font-size: 28rpx;
		font-weight: bolder;
	}
	
	.topText {
		font-size: 23rpx;
		color: #9B9C9E;
	}
	
	.numText {
		font-weight: bold;
	}
	
	
	.jtRoted {
	  transform: rotate(180deg); /* 顺时针旋转180度 */
	}
	
				
</style>